<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul {
				border: 2px solid black;
				position: relative;
				margin: 50px auto;
			}
			
			li {
				float: left;
			}
			h2{
				text-align: center;
				margin-top: 30px;
			}
			h6{
				text-align: center;
			}
		</style>
		<h2>刷新更换图片</h2>
		<h6>可检测游戏是否完成</h6>
		<ul>
		</ul>
		<script type="text/javascript">
			var k = 0,
				i1, i2, wid, hei,
				ul = document.querySelector("ul");
			arr = [], arr1 = [], q1 = Math.floor(Math.random() * 2+1);
			for(var i = 0; arr1.length < 8; i++) {
				var q = Math.floor(Math.random() * 8 + 1);
				arr1[i] = q;
				for(var k = 0, j = 0; k < i; k++) {
					if(arr1[k] == arr1[i]) {
						arr1.pop();
						i--;
						break;
					} else {
						j++;
					}
				}
			}
			for(var i = 0; i < 8; i++) {
				ul.innerHTML += "<li><img src='img/" + q1 + "/10" + arr1[i] + ".jpg'/></li>";
			}
			window.onload = function() {
				var lis = document.querySelectorAll("li"),
					limg = document.querySelectorAll("li img");
				wid= parseInt(getComputedStyle(limg[0]).width);
				hei = parseInt(getComputedStyle(limg[0]).height);
				ul.style.width = 3 * wid+ 4 + "px";
				ul.style.height = 3 * hei + 4 + "px";
				for(var i = 0; i < lis.length; i++) {
					lis[i].style.width = wid+ "px";
					lis[i].style.height = hei + "px";
				}
				SRLL(lis, limg);
			}

			function SRLL(lis, limg) {
				for(var i = 0; i < lis.length; i++) {
					arr.push([lis[i].offsetLeft, lis[i].offsetTop]);
				}
				for(var i = 0; i < lis.length; i++) {
					lis[i].style.float = "none";
					lis[i].style.position = "absolute";
					lis[i].style.left = arr[i][0] + "px";
					lis[i].style.top = arr[i][1] + "px";

				}
				for(var i = 0; i < lis.length; i++) {
					melon(lis[i]);
				}

				function melon(obj) {
					obj.onmousedown = function(e) {
						e.preventDefault();
						var x = e.clientX,
							y = e.clientY,
							_left = obj.offsetLeft,
							_top = obj.offsetTop;
						document.onmousemove = function(e) {
							e.preventDefault();
							var a = e.clientX - x + _left,
								b = e.clientY - y + _top;
							k = 0;
							for(var j = 0; j < lis.length; j++) {
								if(obj != lis[j]) {
									bump(obj, lis[j], a, b);
								}
							}
						}
						document.onmouseup = function() {
							document.onmousemove = null;
						}
					}
				}

				function bump(obj1, obj2, a, b) {
					var l1 = obj1.offsetLeft,
						r1 = obj1.offsetLeft + obj1.offsetWidth,
						t1 = obj1.offsetTop,
						b1 = obj1.offsetTop + obj1.offsetHeight,
						l2 = obj2.offsetLeft,
						r2 = obj2.offsetLeft + obj2.offsetWidth,
						t2 = obj2.offsetTop,
						b2 = obj2.offsetTop + obj2.offsetHeight;
					if(l2 >= r1 || t2 >= b1 || l1 >= r2 || t1 >= b2) {
						k++;
						if(k == lis.length - 1) {
							i1 = getComputedStyle(obj1).left;
							i2 = getComputedStyle(obj1).top;
							MELON(obj1, obj2, a, b);
						}
					} else {
						obj1.style.top = i2;
						obj1.style.left = i1;
						document.onmousemove = null;
					}
				}

				function MELON(obj1, obj2, a, b) {
					if(a % wid< wid/ 2) {
						obj1.style.left = a - a % wid+ "px";
					} else {
						obj1.style.left = a + wid- a % wid+ "px";
					}
					if(b % hei < hei / 2) {
						obj1.style.top = b - b % hei + "px";
					} else {
						obj1.style.top = b + hei - b % hei + "px";
					}
					if(a > 2 * wid) {
						obj1.style.left = 2 * wid+ "px";
					} else if(a < 0) {
						obj1.style.left = 0 + "px";
					}
					if(b > 2 * hei) {
						obj1.style.top = 2 * hei + "px";
					} else if(b < 0) {
						obj1.style.top = 0 + "px";
					}
				}
			}
			//检测拼图是否完成
			ul.addEventListener("mouseup",function(e){
			var	lis1=document.querySelectorAll("li"),
				arr3=[],v=0;
				for(var i=0;i<arr.length;i++){
					for(var j=0;j<lis1.length;j++){
						if(lis1[j].offsetLeft==arr[i][0]&lis1[j].offsetTop==arr[i][1]){
							arr3.push(lis1[j].innerHTML.substring(18,19));
						}
					}
				}
				for(var i=1;i<=arr3.length;i++){
				var	j=String(i+1);
					if(arr3[i]==j){
						v++;
						if(v==7){
							alert("游戏结束，请刷新")
						}
					}else{
						break;
					}
				}
			})
		</script>
	</body>

</html>